import {Search} from '@/components';
import {Box} from 'native-base';
import React from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import Timeline from 'react-native-beautiful-timeline';

const Work = () => {
  const insets = useSafeAreaInsets();
  const dummyData = [
    {
      date: 1574342522000,
      data: [
        {
          title: 'React Native Beautiful Timeline',
          subtitle: 'Sed at justo eros. Phasellus.',
          date: 1574342522000,
        },
        {
          title: 'React Native',
          subtitle: 'Sed viverra. Nam sagittis.',
          date: 1574342501000,
        },
      ],
    },
    {
      date: 1574248261000,
      data: [
        {
          title: 'Timeline',
          subtitle: 'Morbi magna orci, consequat in.',
          date: 1574248261000,
        },
      ],
    },
    {
      date: 1574125621000,
      data: [
        {
          title: 'Beauty Timeline',
          subtitle: 'Nulla a eleifend urna. Morbi. Praesent.',
          date: 1574125621000,
        },
      ],
    },
    {
      date: 1574125621000,
      data: [
        {
          title: 'Timeline Title',
          subtitle: 'Ut viverra. Nunc interdum.',
          date: 1574125621000,
        },
      ],
    },
    {
      date: 1574125621000,
      data: [
        {
          title: 'In imperdiet.',
          subtitle: 'Etiam at libero eu lacus.Proin pellentesque tempus neque, quis.',
          date: 1574125621000,
        },
      ],
    },
    {
      date: 1574125621000,
      data: [
        {
          title: 'In imperdiet.',
          subtitle: 'Etiam at libero eu lacus.Proin pellentesque tempus neque, quis.',
          date: 1574125621000,
        },
      ],
    },
    {
      date: 1574125621000,
      data: [
        {
          title: 'In imperdiet.',
          subtitle: 'Etiam at libero eu lacus.Proin pellentesque tempus neque, quis.',
          date: 1574125621000,
        },
      ],
    },
  ];
  return (
    <SafeAreaView style={{flex: 1}} edges={['left', 'right']}>
      <Box w="full" h="full" bg="white" style={{paddingTop: insets.top}} position="relative">
        <Search />
        <Box flex={1}>
          <Timeline data={dummyData} dashThickness={2} style={{maxHeight: '100%'}} dashLength={dummyData.length} />
        </Box>
      </Box>
    </SafeAreaView>
  );
};

export default Work;
